<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>通知栏</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/LogCss.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        #tb1 tr:hover td {
            background-color: #F3F3F3;
        }
        button:hover{
            cursor:pointer;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- header -->
    <div th:replace="~{commons/header::header}"></div>
    <!-- left -->
    <div th:replace="~{commons/Left::left}"></div>
    <!-- 内容主体区域 -->

    <div class="layui-body" id="app">
        <!-- 全局遮罩 -->
        <div v-if="notifyInfo" id="userInfo">
            <div style="background-color: white;width: 50%;height: 50%;margin-top: 2%;margin-left: 15%;">
                <div style="height: 35px;border-bottom: 1px solid #0C0C0C;">
                    <div><p style="margin-left: 10px;margin-top:7px;font-size: 17px;float: left"><strong>通知详情</strong></p></div>
                </div>
                <table  style="margin: auto;font-size: 12px;">
                    <tr style="height: 60px">
                        <td style="width: 12%;">标题：</td><td><input :value="notifyArr.title" class="input_td"></td>
                    </tr>
                    <tr style="height: 100px">
                        <td>内容：</td><td><textarea :value="notifyArr.content" class="input_td" style="height: 80px;resize:none"></textarea></td>
                    </tr>
                    <tr style="height: 60px">
                        <td>发送者：</td><td><input :value="notifyArr.sender" class="input_td"></td>
                    </tr>
                </table>
                <div style="text-align: center;margin-top:20px;">
                    <button @click="CloseInfoShow()" style="margin-left: 10px;margin-top:5px;height:35px;width: 100px;border: none;color: black;border-radius: 4px 4px 4px 4px;font-size: 8px;">关闭</button>
                </div>

            </div>
        </div>
        <div>

            <strong><p style="margin-top: 30px;margin-left:20px;font-size: 16px;color: #093665;">通知栏</p></strong>
            <div style="background-color: #C1D9F3;width: 95%;margin-left:15px;margin-top: 5px;padding: 5px">
                <div style="margin-top: 5px;margin-left: 5px;">
                    <button style="width: 35px;height: 22px;font-size: 13px;" @click="deleteNotify()">删除</button>
                    <button style="width: 70px;height: 22px;font-size: 13px;" @click="updateState()">标示已读</button>
                    <button style="width: 70px;height: 22px;font-size: 13px;" @click="updateState2()">标示未读</button>
                    <button style="width: 35px;height: 22px;font-size: 13px;" @click="checkAll()">全选</button>
                </div>
                <div style="width: 100%;height:auto;margin-top: 5px;">
                    <table  style="margin: auto;font-size: 8px;" id="tb1">
                        <tr style="height: 10px;width: 100%;background-color: #F2F4F6;">
                            <td ><input style="margin-left: 2px;margin-top: 3px;width: 30px;" type="checkbox" /></td>
                            <td style="width: 10%;padding-left:  15px;border-left: 1px solid #b2dba1;">标题</td>
                            <td style="width: 85%;padding-left: 15px;border-left: 1px solid #b2dba1;">内容</td>
                            <td style="width: 5%;padding-left: 15px;border-left: 1px solid #b2dba1;">状态</td>
                        </tr>
                        <tr v-for="(info,index) in arr" style="height: 10px;width: 100%;background-color: white;">
                            <td ><input style="margin-left: 2px;margin-top: 3px;width: 30px;" type="checkbox" name="checkbox" :value="info.notify_Id"/></td>
                            <td style="width: 10%;padding-left:  15px;border-left: 1px solid #b2dba1;"  @click="showInfo(info,info.notify_Id)">{{info.title}}</td>
                            <td style="width: 85%;padding-left: 15px;border-left: 1px solid #b2dba1;"  @click="showInfo(info,info.notify_Id)">{{info.content}}</td>
                            <td style="width: 5%;padding-left: 15px;border-left: 1px solid #b2dba1;" :style="{color :zxc(info.state)}"  @click="showInfo(info,info.notify_Id)">{{info.state}}</td>
                        </tr>
                        <tr style="height: 40px;width: 100%;background-color: #FFFFE9;" v-if="disPlay"><td colspan="4" style="text-align: center">你目前还没有通知呢！</td></tr>
                    </table>
                </div>
            </div>
        </div>



    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>

<script>
    layui.use('element', function() {
        var element = layui.element;
    });
    new Vue({
            el:"#app",
            data:{
                arr:[],
                ids:"",
                select:true,
                notifyInfo:false,
                notifyArr:[],
                userId:[[${session.loginInfo.userId}]],
                disPlay:false,
            },
            mounted(){
                this.GetNotifyInfo();
            },
            methods:{
                GetNotifyInfo:function () {
                    var that = this;
                    axios.get("http://localhost:8443/NotifyList/"+that.userId).then(function (response) {
                        console.log(response.data);
                        if(response.data!=""){
                            that.disPlay=false;
                            that.arr = response.data;
                        }else{
                            that.arr = response.data;
                            that.disPlay=true;
                        }

                    },function (err) {
                        console.log(err);
                    });
                },

                //删除记录
                deleteNotify:function () {
                    var inputs = document.getElementsByName("checkbox");
                    var flag = false;
                    for(var i =0 ; i<inputs.length;i++ ){
                        if(inputs[i].checked){
                            flag = true;
                            if(this.ids == ""){
                                this.ids = inputs[i].value;
                                inputs[i].checked = false;
                            }else{
                                this.ids += ","+inputs[i].value;
                                inputs[i].checked = false;
                            }
                        }
                    }
                    if(!flag){
                        alert("请选择要删除的记录!");
                        return;
                    }else{
                        if(!confirm("确定删除所选记录吗?")) return;
                        var that = this;
                        axios.get("http://localhost:8443/deleteNotify/"+this.ids).then(function (response) {
                            console.log(response.data);
                            that.GetNotifyInfo();
                            alert("删除成功!");
                        },function (err) {
                            console.log(err);
                            alert("删除失败!");
                        })
                        this.ids = "";
                    }
                },

                //全选/反选

                checkAll:function(){
                    var inputs = document.getElementsByName("checkbox");
                    for(var i  =0;i<inputs.length;i++){
                        inputs[i].checked = this.select;
                    }
                    this.select = !this.select;
                },

                //标示已读

                updateState:function () {
                    var inputs = document.getElementsByName("checkbox");
                    var flag = false;
                    for(var i =0 ; i<inputs.length;i++ ){
                        if(inputs[i].checked){
                            flag = true;
                            if(this.ids == ""){
                                this.ids = inputs[i].value;
                                inputs[i].checked = false;
                            }else{
                                this.ids += ","+inputs[i].value;
                                inputs[i].checked = false;
                            }
                        }
                    }
                    if(!flag){
                        alert("请选择要操作的记录!");
                        return;
                    }else{
                        if(!confirm("确定操作所选记录吗?")) return;
                        var that = this;
                        axios.get("http://localhost:8443/updateNotify/"+this.ids).then(function (response) {
                            console.log(response.data);
                            that.GetNotifyInfo();
                            alert("操作成功!");
                        },function (err) {
                            console.log(err);
                            alert("操作失败!");
                        })
                        this.ids = "";
                    }
                },

                updateState2:function () {
                    var inputs = document.getElementsByName("checkbox");
                    var flag = false;
                    for(var i =0 ; i<inputs.length;i++ ){
                        if(inputs[i].checked){
                            flag = true;
                            if(this.ids == ""){
                                this.ids = inputs[i].value;
                                inputs[i].checked = false;
                            }else{
                                this.ids += ","+inputs[i].value;
                                inputs[i].checked = false;
                            }
                        }
                    }
                    if(!flag){
                        alert("请选择要操作的记录!");
                        return;
                    }else{
                        if(!confirm("确定操作所选记录吗?")) return;
                        var that = this;
                        axios.get("http://localhost:8443/updateNotify2/"+this.ids).then(function (response) {
                            console.log(response.data);
                            that.GetNotifyInfo();
                            alert("操作成功!");
                        },function (err) {
                            console.log(err);
                            alert("操作失败!");
                        })
                        this.ids = "";
                    }
                },

                //设置id
                zxc:function (id) {
                    if(id == "未读"){
                        return "red";
                    }else{
                        return "#a1a6aB";
                    }

                },
                showInfo:function (arr,id) {
                    this.notifyInfo = true;
                    this.notifyArr = arr;
                    var that = this;
                    axios.get("http://localhost:8443/updateNotify/"+id).then(function (response) {
                        console.log(response.data);
                        that.GetNotifyInfo();
                    },function (err) {
                        console.log(err);
                    })
                    this.ids = "";
                },
                CloseInfoShow:function () {
                    this.notifyInfo = false;
                },
            }
        }
    )
</script>

</body>
</html>